<template>
    <div class="shareBox">
        <div class="main" v-show="haspwd">
            <header>
                <img src="../../assets/img/share/logo.png" alt="" width="59" height="50">
                <p>中达企业数据链</p>
            </header>
            <section>
                <div class="title">
                    <img :src="userImg" alt="" width="52" height="52">
                    <p>{{user}} 给您加密分享了文件</p>
                </div>
                <div class="content">
                    <p>
                        <span>请输入密码提取：</span>
                        <span>分享时间：{{time}}</span>
                    </p>
                    <div class="enterCode">
                        <el-input
                                v-model="pass"
                                autocomplete="off"
                                style="width:370px"
                                @keyup.enter.native="centainpwd"
                        ></el-input>
                        <el-button type="primary" @click="centainpwd">提取文件</el-button>
                    </div>
                </div>
            </section>
        </div>
        <div class="userShare" v-show="!haspwd">
            <header>
                <div>
                    <img src="../../assets/img/share/logo.png" alt="">
                    <h3>中达数据中心企业数据链</h3>
                </div>
                <div>
                    <!--<img :src="userImg" class="userimg">-->
                    <!--<span class="user-name">{{user}}</span>-->
                    <!--<el-dropdown class="todownlogo">-->
                        <!--<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
                        <!--<el-dropdown-menu slot="dropdown">-->
                            <!--<el-dropdown-item icon="el-icon-s-custom">个人中心</el-dropdown-item>-->
                            <!--<el-dropdown-item class='go-out' @click.native="logout"><i class="fa fa-sign-out" aria-hidden="true"></i>退出登录</el-dropdown-item>-->
                        <!--</el-dropdown-menu>-->
                    <!--</el-dropdown>-->
                </div>
            </header>
            <aside>
                <div class="shareContent">
                    <div class="contentLeft">
                        <div class="showLeft">
                            <div class="leftHeader">
                                <div class="file">
                                    <span :class="'file-icon '+ icon" class="fileIcon"></span>
                                    <p v-show="fileName != ''">{{fileName}}等</p>
                                    <p v-show="fileName1 != ''">{{fileName1}}</p>
                                </div>
                                <!-- <div class="download">
                                    <el-button @click="downloadFile" size="small" type="primary">立即下载</el-button>
                                </div> -->
                            </div>
                            <div class="goback" v-show="nameList.length>0">
                                <a @click="handleGoBack" class="frame-return" href="javascript:;">
                                    <i class="el-icon-back"></i>上一级
                                </a>
                                <span
                                        :key="index"
                                        @click="handleAddressClick(item,index)"
                                        v-for="(item,index) in nameList"
                                >
                                <span class="fileaddress">{{item.name}}</span> /
                            </span>
                            </div>
                            <el-table
                                    height="800"
                                    v-loading="listLoading"
                                    @selection-change="handleSelectionChange"
                                    :data="tableData"
                                    style="width: 100%;font-family:'宋体'">
                                    <el-table-column width="380" prop="fileName"
                                        label="文件名">
                              <template slot-scope="scope">
                                  <div class="folder-box" @click="handleCellClick(scope.row)">
                                      <div style="display: flex;align-items: center">
                                          <span :class="'file-icon '+scope.row.iconcls"></span>
                                          <el-tooltip
                                                  class="item"
                                                  effect="dark"
                                                  v-if="scope.row.fileName && $abslength(scope.row.fileName) > 24"
                                                  :content="scope.row.fileName"
                                                  placement="top-start"
                                          >
                                              <span class="file-name">{{ scope.row.fileName.substring(0,$getFontShowLength(scope.row.fileName,24))+'...'}}</span>
                                          </el-tooltip>
                                          <span v-else class="file-name">{{scope.row.fileName}}</span>
                                      </div>
                                      <div class="folder-box-options" v-if="scope.row.fileType == 0">
                                          <span style="cursor: pointer; padding-right: 10px" @click.stop @click="downloadFile(scope.row)">
                <i class="fa fa fa-cloud-download" aria-hidden="true"></i>下载
              </span>
                                          <span style="cursor: pointer; padding-right: 10px" @click.stop @click="previewFile(scope.row)">
                <i class="fa fa-file" aria-hidden="true"></i>
                预览
              </span>
                                      </div>
                                  </div>
                              </template>
                          </el-table-column>
                                <!-- <el-table-column
                                        prop="fileName"
                                        label="文件名">
                                    <template slot-scope="scope">
                                        <div class="folder-box" @click="handleCellClick(scope.row)">
                                            <div style="display: flex;align-items: center">
                                                <span :class="'file-icon '+scope.row.iconcls"></span>
                                                <el-tooltip
                                                        class="item"
                                                        effect="dark"
                                                        v-if="scope.row.fileName && abslength(scope.row.fileName) > 30"
                                                        :content="scope.row.fileName"
                                                        placement="top-start"
                                                >
                                                    <span class="file-name">{{ scope.row.fileName.substring(0,scope.row.fileNameShow)+'...'}}</span>
                                                </el-tooltip>
                                                <span v-else class="file-name">{{scope.row.fileName}}</span>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column> -->
                                <el-table-column
                                        prop="fileSize"
                                        label="大小"
                                        width="100">
                                </el-table-column>
                                <el-table-column
                                        prop="createTime"
                                        label="时间">
                                </el-table-column>
                                <el-table-column>
        <template slot-scope="scope">
          <div v-if="$store.state.outLoadingList.length>0&&$store.state.outLoadingList[0].id==scope.row.id">
            <span>正在下载中：</span>
            <span style="color:red" @click="stopDownload"><i class='el-icon-circle-close'></i></span>
            <el-progress :percentage='$store.state.outLoadingList[0].percentComplete' :show-text="true"></el-progress>
          </div>
        </template>
      </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <div class="contentRight">
                        <div class="userInfo">
                            <img :src="userImg" alt="" >
                            <span>{{user}} 给您加密分享了文件</span>
                        </div>
                        <div class="tips">
                            <p class="current">分享方式:  <span> {{shareMethod}}</span></p>
                            <p class="shareInfo">分享时间:  <span>{{time}}</span></p>
                        </div>
                    </div>
                </div>
            </aside>
        </div>
    </div>
</template>

<script>
var ipfsClient = require("ipfs-http-client");
var xhr = new XMLHttpRequest();
  export default {
    name: "Share",
    data(){
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      return{
        currentSearch:"",
        user:"admin",
        time:"2018-12-12 12:13:11",
        passRules: [
          { validator: validatePass, trigger: 'blur' }
        ],
        pass:"",
        listLoading:false,
        nameList:[],
        tableData:[],
        count:0,
        shareMethod:"公开分享",
        haspwd:false,
        url:"",
        userImg:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557835326144&di=d19661337d8d090186247a99ddc3a39c&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201411%2F29%2F20141129181139_aV58j.thumb.700_0.jpeg",
        fileName:"",
        fileName1:"",
        icon:"",
        downloadData:[],
        flag:false,
        percentComplete:0,
        ipfsArray:[],
      }
    },
    created(){
      console.log(window.location);
      this.$store.commit('setOutLoadingList',[]);
      this.url = window.location.hash.split("=")[1];
      this.checkHaspwd();
    },
    methods:{
      /**
       * 路径点击
       * @param item
       * @param index
       */
      handleAddressClick(item,index){
        console.log(item,index);
        console.log("before",this.nameList);
        this.nameList.forEach((val,key)=>{
          console.log("vvvvvvvvvvv",val,item);
          if(val.name == item.name){
            console.log("aaaaaaaa",key)
            this.nameList = this.nameList.splice(0,key+1);
          }
        })
        console.log("after",this.nameList);
        if(index > 0 ){
          this.click(item.id)
        }else{
          this.nameList = [];
          this.centainpwd();
        }
      },
      /**
       * 返回上一级
       */
      handleGoBack(){
        console.log(this.nameList);
        let id = this.nameList.pop().dirId;
        if(this.nameList.length > 0){
          this.click(id)
        }else{
          this.centainpwd();
        }

      },
      /**
       * 获取数据
       * @param id
       */
      click(id){
        this.tableData = [];
        this.$http.post("/file/clickSharedir", { id: id }).then(res => {
          if(res.status == 200){
            console.log("click",res);
            let { data } = res;
            if (data === null) {
              this.listLoading = false;
              this.tableData = [];
              return;
            }else{
              console.log("有数据")
              let file_icon;
              data.forEach((v, k) => {
                var suffixTemp = v.fileName.split(".");
                if (suffixTemp.length > 1) {
                  suffixTemp = suffixTemp[suffixTemp.length - 1];
                  file_icon = "icon_list_" + suffixTemp;
                } else if (v.fileType === 0) {
                  suffixTemp = "";
                } else {
                  suffixTemp = null;
                }
                let time = v.creatTime == null ? "-" : v.creatTime;
                this.tableData.push({
                  id: v.id,
                  dirId: v.dirId,
                  fileName: v.fileName,
                  fileSize:
                    v.fileSize == null || v.fileSize =="0" ? "-" : this.$getFileSize(v.fileSize),
                  createTime:v.updateTime == null ? time : v.updateTime,
                  suffix: suffixTemp,
                  fileHash: v.fileHash,
                  fileType: v.fileType,
                  iconcls: v.fileType == 1 ? "icon_list_folder" : file_icon,
                  size:v.fileSize,
                });
              });
              this.listLoading = false;
            }
          }
        });
      },
      /**
       * 文件下一级
       * @param para
       */
      handleCellClick(para) {
        this.listLoading = true;
        if (para.fileType == 1) {
          this.tableData = [];
          this.$http.post("/file/clickSharedir", { id: para.id }).then(res => {
            if(res.status == 200){
              console.log("click",res);
              let { data } = res;
              this.nameList.push({
                id: para.id,
                dirId:para.dirId,
                name: para.fileName
              }); //点击的时候push进去
              if (data === null) {
                this.listLoading = false;
                this.tableData = [];
                return;
              }else{
                console.log("有数据")
                let file_icon;
                data.forEach((v, k) => {
                  var suffixTemp = v.fileName.split(".");
                  if (suffixTemp.length > 1) {
                    suffixTemp = suffixTemp[suffixTemp.length - 1];
                    file_icon = "icon_list_" + suffixTemp;
                  } else if (v.fileType === 0) {
                    suffixTemp = "";
                  } else {
                    suffixTemp = null;
                  }
                  let time = v.creatTime == null ? "-" : v.creatTime;
                  this.tableData.push({
                    id: v.id,
                    dirId: v.dirId,
                    fileName: v.fileName,
                    fileSize:
                      v.fileSize == null  || v.fileSize =="0" ? "-" : this.$getFileSize(v.fileSize),
                    createTime:v.updateTime == null ? time : v.updateTime,
                    suffix: suffixTemp,
                    fileHash: v.fileHash,
                    fileType: v.fileType,
                    iconcls: v.fileType == 1 ? "icon_list_folder" : file_icon,
                    size:v.fileSize,
                  });
                });
                this.listLoading = false;
              }
            }
          });
        } else {
          this.listLoading = false;
          this.previewFile(para);
        }
      },
      abslength( str ) {
        return str.replace(/[^\x00-\xff]/ig, '**').length;
      },
      handleSelectionChange(val) {
        console.log(val);
        val.forEach((val,key)=>{
          if(val.fileType == 1){
            this.flag = false;
            this.$message("文件夹暂不支持下载");
          }else{
            this.flag = true;
          }
        })
        if(this.flag){
          this.downloadData = [];
          console.log("aaaaaaaaaa")
          val.forEach((val,key)=>{
            this.downloadData.push(val)
          })
        }
        console.log("dowload",this.downloadData);
      },
      stopDownload(){
      xhr.abort();
      this.$message.info('取消下载');
      this.$store.commit('setOutLoadingList',[]);
    },
     downloadFile(file) {
       let methodType=file.size>1000000000 ? 0 : 1;
      if(this.ipfsArray==0){
        this.$message.error('获取请求路径失败,请检查网络或呼叫管理员');
      }else{
        if(methodType){
          if(this.$store.state.outLoadingList.length>0){
          this.$message.warning('请等待当前文件下载完成后，再执行下载操作。');
          return;
        }
      let obj={
        id:file.id,
        percentComplete:0
      }
      this.$store.commit('setOutLoadingList',[obj]);
           this.getBlob(this.ipfsArray[1]+'ipfs/'+file.fileHash).then(blob => {
             this.$store.commit('setOutLoadingList',[]);
             console.log(this.percentComplete)
          this.saveAs(blob, file.fileName,true);
        });
        }else{
          this.$message({
            type:'warning',
            message:'大文件需专用通道匿名加速下载，下载后请手动重命名',
            duration:'5000'
          })
          let url=this.ipfsArray[1]+'ipfs/'+file.fileHash;
          this.saveAs(url,file.fileName);
        }
      }
    },
    getType(filename) {
        var index1 = filename.lastIndexOf(".");
        var index2 = filename.length;
        var type = filename.substring(index1 + 1, index2);
        return type;
      },
    getBlob(url) {
      let _this=this
      return new Promise(resolve => {
        xhr.open("GET", url, true);
        xhr.responseType = "blob";
        let obj=this.$store.state.outLoadingList[0];
        xhr.addEventListener("progress", function(evt){
      if (evt.lengthComputable) {
        obj.percentComplete =  Math.round((evt.loaded / evt.total ).toFixed(2) * 100);
        _this.$store.commit('setOutLoadingList',[obj]);
      }
    }, false);
        xhr.onload = () => {
          if (xhr.status === 200) {
            resolve(xhr.response);
          }
        };
        xhr.send();
      });
    },
    saveAs(url,filename,isArr) {
      if (window.navigator.msSaveOrOpenBlob && isArr===true) {
        navigator.msSaveBlob(url, filename);
      } else {
        const link = document.createElement("a");
        const body = document.querySelector("body");
        if(isArr===true){
         link.href=window.URL.createObjectURL(url);
        }else{
          link.href = url;
        };
        link.download = filename;
        link.type="application/octet-stream"
        console.log(link.download)
        link.style.display = "none";
        body.appendChild(link);
        link.click();
        body.removeChild(link);
        window.URL.revokeObjectURL(link.href);
      }
    },
      previewFile(file){
        console.log(file);
        let arr = ["png","jpg","pdf","gif","txt"];
        if (arr.indexOf(this.getType(file.fileName)) != -1) {
          if(this.$store.state.ipfsArray==0){
            this.$message.error('获取请求路径失败,请检查网络或呼叫管理员');
          }else{
            this.getBlob(this.ipfsArray[1]+'ipfs/'+file.fileHash).then(blob => {
              this.imgurl = window.URL.createObjectURL(blob);
              console.log(this.imgurl)
              if(this.imgurl != ""){
                window.open(this.imgurl,"_blank")
              }
            });
          }
        } else if(file.suffix.toLowerCase() == "mp4" || file.suffix.toLowerCase() == "webm" || file.suffix.toLowerCase() == "ogg" ){
          let url = this.ipfsArray[1]+'ipfs/'+file.fileHash;
          console.log(url);
          var page = window.open();
          var html=`<body style='background:black;display: flex;justify-content: center;align-items: center'>
                        <div style='width:980px;height: 480px'>
                            <video  style='width:980px;height: 480px' controls width='100%' autoplay id="playVideo">
                                <source class="source" src=${url} type="video/mp4">
                            </video>
                        </div>
                    </body>`
          page.document.write("<title>视频预览</title>"+html);
        }else if(file.suffix.toLowerCase() == "flv"){
          let url = this.ipfsArray[1]+'ipfs/'+file.fileHash;
          console.log(url);
          let data = url;
          let data1 = "vcastr_file="+data+"&LogoText=ÊÓÆµ²¥·ÅÆ÷&BufferTime=3&IsAutoPlay=1";
          let data2 = "vcastr_file="+data+"&LogoText=ÊÓÆµ²¥·ÅÆ÷&IsAutoPlay=1";
          var page = window.open();
          var html=`<body style='background:black;display: flex;justify-content: center;align-items: center'>
                        <div style="width: 100%;height:100%;display: flex;justify-content: center;align-items: center;background: black">
                            <object class id="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=${data} width="980" height="480" style="border: 1px solid #549de8">
                                <param name="movie" value="/static/flvplayer.swf">
                                <param name="quality" value="high">
                                <param name="allowFullScreen" value="true">
                                <param name="FlashVars" value=${data1}>
                                <embed src="/static/flvplayer.swf" allowfullscreen="true" flashvars=${data2} quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="480"></embed>
                            </object>
                        </div>
                    </body>`
          page.document.write("<title>视频预览</title>"+html);
        }else{
          this.$message("当前文件不支持预览，请下载查看");
        }
      },
      centainpwd(){
        this.tableData = [];
        // if(this.pass == checkma)
        this.$http.get("/shareOut/getShareOutList",{
          params:{
            url:this.url,
            code:this.pass
          }
        }).then(res=>{
          if(res.status == 200){
            console.log("fileInfo",res);
            let {data} = res;
            let file_icon;
            data.forEach(val=>{
              var suffixTemp = val.fileName.split(".");
              if (suffixTemp.length > 1) {
                suffixTemp = suffixTemp[suffixTemp.length - 1];
                file_icon = "icon_list_" + suffixTemp;
              } else if (val.fileType === 0) {
                suffixTemp = "";
              } else {
                suffixTemp = null;
              }
              let time = val.creatTime == null ? "-" : val.creatTime;
              this.tableData.push({
                id:val.id,
                dirId:val.dirId,
                fileName:val.fileName,
                fileSize:val.fileSize == null  || val.fileSize =="0" ? "-" : this.$getFileSize(val.fileSize),
                createTime:val.updateTime == null ? time : val.updateTime,
                fileType: val.fileType,
                fileHash:val.fileHash,
                suffix: suffixTemp,
                iconcls: val.fileType == 1 ? "icon_list_folder" : file_icon,
              })
              this.time = val.shareTime
              this.userImg = val.headImg
              this.user = val.userEmail
            })
            if(this.tableData && this.tableData.length>0){
              this.icon = this.tableData[0].iconcls;
              if (this.tableData && this.tableData.length>1){
                this.fileName = this.tableData[0].fileName;
              }else if(this.tableData && this.tableData.length == 1){
                this.fileName1 = this.tableData[0].fileName;
              }
            }
            this.haspwd = false;
          }else{
            this.$message.error(res.msg);
          }
        })
      },
      checkHaspwd(){
        this.$http.get("/shareOut/getIsNeed",{
          params:{
            url:this.url
          }
        }).then(res=>{
          if(res.status == 200){
            console.log(res);
            if(res.data.code == 0){
              this.shareMethod = "公开分享"
              this.centainpwd();
              this.haspwd = false;
            }else if(res.data.code == 1){
              this.user = res.data.shareUser;
              if(res.data.headImg != null){
                this.userImg = res.data.headImg;
              }else{
                this.userImg = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1557835326144&di=d19661337d8d090186247a99ddc3a39c&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201411%2F29%2F20141129181139_aV58j.thumb.700_0.jpeg";
              }
              this.shareMethod = "加密分享"
              this.haspwd = true;
            };
            let {config}=res.data;
            this.getIpfs(config);
          }
        })
      },
      getIpfs(data) {
        console.log(data);
        let iIp = data.innerPort.slice(0, -10);
        let iPort = data.innerPort.slice(-9, -5);
        let iPort1=data.innerPort.slice(-4)
        let oIp = data.outerPort.slice(0, -10);
        let oPort = data.outerPort.slice(-9, -5);
        let oPort1=data.outerPort.slice(-4);
        console.log(iIp,':',iPort,':',iPort1)
        console.log(oIp,':',oPort,':',oPort1)
        let inIpfs = ipfsClient({ host: iIp, port: iPort, protocol: "http" });
        let outIpfs = ipfsClient({ host: oIp, port: oPort, protocol: "http" });
        let _this=this;
        inIpfs.id(function(err, identity) {
          if (err) {
            outIpfs.id(function(err, identity) {
              if (err) {
                _this.ipfsArray=[];
              }else{
                _this.ipfsArray=['http://'+oIp+':'+oPort+'/api/v0/add?pin=true','http://'+oIp+':'+oPort1+'/',1];
              }
            });
          }else{
            _this.ipfsArray=['http://'+iIp+':'+iPort+'/api/v0/add?pin=true','http://'+iIp+':'+iPort1+'/',0];
          }
        });
    },
    }
  }
</script>

<style lang="scss">
    .enterCode{
        .el-input__inner{
            height: 52px!important;
            line-height: 52px!important;
        }
    }
    aside{
       .el-checkbox__inner{
            width: 22px!important;
            height: 22px!important;
        }
        .el-checkbox__inner::after{
            border-left: 0;
            border-top: 0;
            height: 15px;
            left: 6px;
            top:-1px;
            width: 8px;
        }
        .el-table td{
            padding:16px 0!important;
        }
        .el-table th{
            padding:24px 0!important;
        }
    }
    .enterCode {
         .el-input__inner {
            height: 52px !important;
            line-height: 52px !important;
        }
    }
</style>
<style scoped lang="scss">
.shareBox{
    height:100%;
    cursor: default;
    .folder-box{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
      }
    .folder-box-options {
          display: none;
      }
      .folder-box:hover{
        cursor: pointer;
      }
      .folder-box:hover .folder-box-options {
          height: 23px;
          display: inline-block;
          float: right;
          font-weight: 700;
          cursor: pointer;
      }
    .main{
        background: #F7FBFF;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        header{
            display: flex;
            justify-content: center;
            margin-bottom:29px;
            p{
                margin-top: 0;
                margin-left:9px;
                font-size:36px;
                font-family:SourceHanSansCN-Medium;
                font-weight:500;
                color:rgba(43,43,43,1);
            }
        }
        section{
            width: 580px;
            height: 280px;
            background: white;
            .title{
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                background: linear-gradient(to right, #549DE8 , #59ABFF);
                padding:14px 0;
                display: flex;
                align-items: center;
                img{
                    margin-left:44px;
                    margin-right: 22px;
                    width: 52px;
                    height: 52px;
                    background: #549DE8;
                    border-radius:50%;
                    border:4px solid #8DC5FF;
                }
                p{
                    font-size:16px;
                    font-family:SourceHanSansCN-Regular;
                    font-weight:400;
                    color:rgba(255,255,255,1);
                }
            }
            .content{
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                padding:40px 40px 73px 40px;
                display: flex;
                justify-content: center;
                flex-direction: column;
                p{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    span:first-child{
                        font-family:SourceHanSansCN-Regular;
                        font-weight:400;
                        color:rgba(102,102,102,1);
                    }
                    span:last-child{
                        font-family:SourceHanSansCN-Regular;
                        font-weight:400;
                        color:rgba(204,204,204,1);
                    }
                }
                .enterCode{
                    margin-top:20px;
                    .el-button--primary {
                        height: 52px;
                        background: #549DE8;
                    }
                }
            }
        }
    }
    .userShare{
        background: #F6F6F6;
        .file-icon{
            background: url("/static/bigicon.png") no-repeat -196px 0px;
            display: inline-block;
            width: 28px;
            height: 29px;
        }
        .file-name{
            margin-left: 10px;
        }
        header{
            display: flex;
            justify-content: space-between;
            height: 80px;
            background: white;
            display: flex;
            align-items: center;
            div{
                display: flex;
                align-items: center;
                .currentSearch{
                    margin-right: 91px;
                }
                .user-name{
                    margin:0 11px;
                }
                .todownlogo{
                    margin-right: 20px;
                }
                .userimg{
                    border-radius: 50%;
                    margin-left: 0;
                    width: 44px!important;
                    height: 44px;
                }
            }
            img{
                margin-left: 40px;
                width: 60px;
                height: 60px;
            }
            h3{
                margin-left: 41px;
                font-size:24px;
                font-family:SourceHanSansCN-Medium;
                font-weight:500;
                color:rgba(84,157,232,1);
            }
        }
        aside{
            display: flex;
            justify-content: center;
            align-items: center;
            color:#606266;
            padding-top:10px;
            padding-bottom:190px;
            .shareContent{
                background: white;
                width: 1200px;
                height: 800px;
                border:1px solid #ccc;
                border-radius:5px;
                box-shadow: 5px 5px 5px #eee;
                overflow: hidden;
                display: flex;
                .contentLeft{
                    width: 75%;
                    height: 100%;
                    background: #3d5471;
                    .showLeft{
                        height: 100%;
                        overflow: scroll;
                        background: white;
                        .el-table{
                            margin: 10px 0;
                        }

                        .leftHeader{
                            padding: 20px;
                            height: 36px;
                            overflow: hidden;
                            border-bottom:1px solid #ccc;
                            .el-button--primary{
                                width: 123px;
                                padding:10px;
                                background-color:#549DE8;
                            }
                            .file{
                                margin-left: 20px;
                                float:left;
                                display: flex;
                                .fileIcon{
                                    margin-right: 10px;
                                }
                                p{
                                    margin-top: 4px;

                                }
                            }
                            .download{
                                margin-right: 20px;
                                float: right;
                            }
                        }
                        .goback{
                            padding:20px 20px 0;
                        }
                    }
                }
                .contentRight{
                    background: #F7FBFF;
                    width: 25%;
                    padding: 0px 22px;
                    .userInfo{
                        margin-top:26px;
                        margin-bottom: 24px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        img{
                            margin-right: 18px;
                            border-radius:50%;
                            width: 45px;
                            height: 45px;
                        }
                        span{
                            margin-right: 33px;
                            display: block;
                            font-size:16px;
                            font-family:SourceHanSansCN-Regular;
                            font-weight:400;
                            color:rgba(153,153,153,1);
                        }
                    }
                    .tips{
                        padding:20px;
                        margin-top:24px;
                        border:1px solid rgba(238,238,238,1);
                        border-radius:10px;
                        .current,.shareInfo{
                            color:#B4B4B4;
                            margin-bottom:10px;
                            span{
                                margin-left:10px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
